/*
 * @Author: shaohh 页面文件的menu选择
 * @Date: 2022-09-07 17:20:23
 * @Last Modified by: shaohh
 * @Last Modified time: 2022-09-30 17:26:27
 */

<template>
  <div class="menu_container">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if="menuList.length>0">
      <el-menu-item  v-for="(item,index) in menuList" :key="'menu'+index" :index="index+''">{{item}}</el-menu-item>
    </el-menu>
    <slot/>
  </div>
</template>
<script>

export default {
  components: {
  },
  props: {
    
    menuList:{
      type:Array,
      require:true, // 必传参数
    },
    activeIndex:{
      type:String,
      default:()=>'0'
    },
  },
  data () {
    return {
    }
  },
  computed:{
    
  },
  created () {
    
  },
  methods: {
    handleSelect(data){
      this.$emit('handleSelect',data)
    }
  },
}
</script>
<style lang='scss' scoped>
.menu_container{
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
  box-shadow: 0px 8px 12px 2px rgba(208,214,221,0.21);
  border-radius: 12px;
  overflow: hidden;
}
::v-deep.menu_container .el-menu-item{
  height: 50px !important;
  line-height: 50px !important;
  color:#666666;
}
::v-deep.menu_container .el-menu-demo{
  background: transparent !important;
}
::v-deep.el-menu--horizontal .el-menu-item:not(.is-disabled):hover, .el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
  background: transparent !important;
  color:#38C6DA;
}

</style>
